<template>
    <div class="container">
      <div>已完成{{isComplete}} / 全部 {{list.length}}</div>
      <div v-if="isComplete>0" class="btn"><button  @click="clear"> 清除已完成</button></div>
    </div>
    
</template>

<script>
    import { computed, defineComponent, reactive, toRefs} from 'vue'
    import { useStore } from 'vuex' 
    export default defineComponent({
        name:'navFooter',
        props:{
            list:{
                type:Array,
                required:true
            }
        },
        setup(props,ctx){
             let store = useStore()
            let data = reactive({
                isComplete:1,
            })
            let isComplete = computed(()=>{
                // 过滤已完成点
                let arr =  props.list.filter(item=>{
                    return item.complete
                })
                return arr.length;
            })
            // 清除已完成
            const clear =( ) =>{
                // 过滤未完成的
                let arr = props.list.filter(item=>item.complete===false)
                console.log('clear');
                // ctx.emit('clear',arr)
        		store.commit('clear',arr)

            }
            return {
                ...toRefs(data),
                clear,
                isComplete
            }
        }
    })
</script>

<style lang="scss" scoped>
    .container{
        display: flex;
        align-items: center; //居中对齐(行)
        justify-content:space-between;//两端对齐(列)
        width:240px;
    }
</style>